<template>
	<div class="category">
		<div class="top-wrap">
			<div class="top">
				<span>全部课程</span>
			</div>
			<div class="filter-wrap">
				<div class="filter">
					<div class="type">
						<div class="name">分类: </div>
						<div class="items">
							<div class="item" :class="[queryParams.categoryId == '' ? 'active' : '']" @click="handleCateClick('')">全部</div>
							<div class="item" :class="[queryParams.categoryId == item.dictValue ? 'active' : '']" 
							v-for="item in courseDict" :key="item.dictValue"
							@click="handleCateClick(item.dictValue)">{{ item.dictLabel }}</div>
						</div>
					</div>
				</div>
				<div class="course-type">
					<div class="items">
						共查询到 <b>{{ total }}</b> 条结果
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="cards">
				<div class="card" v-for="item in courseList" @click="handleShopDetail(item.id)">
					<img class="thumb" :src="baseUrl+item.imageUrl" :alt="item.name" />
					<div class="name">{{ item.title }}</div>
					<div class="price">
						<div class="price-text" v-if="item.price && item.price !== 0">￥{{ item.price }}</div>
						<div class="price-free" v-else>免费</div>
						<div class="shopcart" v-if="item.price && item.price !== 0" @click.stop="handleAddShopCart(item)">
							<svg-icon icon-class="shopping" class="shop-icon"/>
							加购物车
						</div>
						<div class="collect" v-else>
							<i class="el-icon-star-off"></i>收藏</div>
					</div>
				</div>
			</div>
			<pagination
				class="page"
				v-show="total>0"
				:total="total"
				:layout="'total, prev, pager, next'"
				:page.sync="pages.pageNum"
				:limit.sync="pages.pageSize"
				@pagination="pageCourse"
				/>
		</div>
	</div>
</template>

<script>
import user from '@/store/modules/user'
import { listCourse, addCart } from '@/api/web/index'
export default {
	name: 'Category',
	data() { 
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			//查询参数
			queryParams: {
				categoryId: ''
			},
			pages: {
				pageNum: 1,
				pageSize: 5,
			},
			//课程分类字典
			courseDict: [],
			//总数
			total: 0,
			//课程列表
			allCourseList: [],
			courseList: []
		}
	},
	mounted() { 
		this.queryCourse();
		this.queryDictData();
	},
	methods: {
		/**
		 * 查询分类字典
		 */
		async queryDictData() {
			let res = await this.getDicts('course_type');
			if (res.code == 200) { 
				this.courseDict = res.data;
			}
		},
		/**
		 * 查询列表
		 */
		async queryCourse() { 
			let res = await listCourse({
				categoryId: this.queryParams.categoryId
			});
			if (res.code == 200) { 
				this.courseList = res.rows.slice(0, 5);
				this.allCourseList = res.rows;
				this.total = res.rows.length;
			}
		},
		/**
		 * 分类点击
		 * @param val 
		 */
		handleCateClick(val) { 
			this.queryParams.categoryId = val;
			this.queryCourse();
		},
		/**
		 * 分页
		 */
		pageCourse() { 
			let s = (this.pages.pageNum - 1) * this.pages.pageSize;
			let e = this.pages.pageNum * this.pages.pageSize;
			this.courseList = this.allCourseList.slice(s, e);
		},
		/**
		 * 详情
		 */
		handleShopDetail(id) { 
			this.$router.push({
				path: '/webDetail',
				query: { id }
			})
		},
		/**
		 * 加入购物车并跳转页面
		 */
		async handleAddShopCart(item) { 
			let res = await addCart({
				userId: user.state.id,
				courseId: item.id,
			});
			if (res.code == 200) {
				this.$confirm('添加购物车成功', '提示', {
					confirmButtonText: '去购物车结算',
					cancelButtonText: '继续逛逛',
					type: 'success',
					showClose: false
				}).then(() => {
					this.$router.push('/shopCart');
				}).catch(() => {
					console.log('继续逛逛')     
				});
			} else { 
				this.$message({
					message: '加入购物车失败',
					type: 'error'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.category {
	width: 100%;
	.top-wrap {
		width: 100%;
		background-color: #f5f7fa;
		.top {
			width: 1230px;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0 auto;
			padding: 24px 0 16px 0;
			> img {
				width: 40px;
				height: 40px;
				margin-right: 10px;
			}
			> span {
				font-size: 24px;
				font-weight: 600;
			}
		}
		.filter-wrap {
			width: 100%;
			.filter {
				width: 1230px;
				height: 70px;
				margin: 0 auto;
				.type {
					height: 52px;
					line-height: 32px;
					padding: 10px 0;
					margin-bottom: 7px;
					display: flex;
					flex-direction: row;
					.name {
						margin-right: 6px;
						font-weight: 700;
						font-size: 15px;
					}
					.items {
						display: flex;
						flex-direction: row;
						.item {
							height: 32px;
							padding: 0 8px;
							margin: 0 12px 8px 0;
							border-radius: 6px;
							font-size: 15px;
							cursor: pointer;
							&.active {
								background-color: #e5f3bf;
								color: #85ab21;
								font-weight: 600;
							}
						}
					}
				}
			}
			.course-type {
				width: 1230px;
				height: 70px;
				margin: 0 auto;
				border-top: 1px solid #dcdfe6;
				.items {
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 15px;
					> b {
						padding: 0 4px;
					}
				}
			}
		}
	}
	.content {
		width: 100%;
		padding: 30px 0;
		.cards {
			display: flex;
			width: 1230px;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 0 auto;
			.card {
				border: 1px solid #E4E4E4;
				margin: 0 32px 13px 0;
				width: 283px;
				height: 250px;
				box-sizing: border-box;
				position: relative;
				z-index: 0;
				cursor: pointer;
				&:nth-child(4n) {
					margin-right: 0;
				}
				.thumb {
					width: 100%;
					height: 152px;
				}
				.name {
					width: 100%;
					line-height: 24px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					transition: all .5s ease-out;
					padding: 0 15px;
					color: #545C63;
					font-size: 14px;
					overflow: hidden;
				}
				.price {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 5px 15px 0 15px;
					.price-text {
						font-size: 14px;
						color: #F01414;
						font-weight: 600;
					}
					.price-free,
					.collect {
						color: #9199a1;
						font-size: 14px;
					}
					.shopcart {
						display: flex;
						flex-direction: row;
						align-items: center;
						color: #ff655d;
						font-size: 14px;
						.shop-icon {
							margin-right: 2px;
						}
					}
					.collect {
						> i {
							margin-right: 2px;
						}
					}
				}
				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 12px 20px 0 rgba(95, 101, 105, 0.15);
					.name {
						color: #97c225;
					}
				}
			}
		}
		.page {
			width: 1230px;
			margin: 0 auto;
		}
	}
}

.content .card::before {
    border-bottom: 1px solid #97c225;
    border-top: 1px solid #97c225;
    transform: scale(0, 1);
    -ms-transform: scale(0, 1);
}

.content .card::after {
    border-left: 1px solid #97c225;
    border-right: 1px solid #97c225;
    transform: scale(1, 0);
    -ms-transform: scale(1, 0);
}

.content .card::before, .content .card::after {
    box-sizing: border-box;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    -ms-transition: opacity 0.35s ease 0s, -ms-transform 0.35s ease 0s;
    width: 100%;
    z-index: -1;
}

.content .card:hover::before, .content .card:hover::after {
    opacity: 1;
    transform: scale(1,1);
}
</style>